<script setup lang="ts">
import type { Message } from "@/types/room";
import { MsgType, PrescriptionStatus } from "@/enums";
import { getIllnessTimeText, getConsultFlagText } from "@/utils/filter";
import { useUserStore } from "@/stores";
import dayjs from "dayjs";
import { showImagePreview, showToast } from "vant";
import { ref } from "vue";
import EvaluateCard from "./EvaluateCard.vue";
import { useRoute } from "vue-router";
import type { Order } from "@/types/order";
import router from "@/router";
const route = useRoute();
const store = useUserStore();
// 时间格式化
const formatTime = (time: string) => dayjs(time).format("HH:mm");
const props = defineProps<{
  item: Message;
}>();

const imgs = ref<string[]>([]);
const show = ref(false);
function imgLook() {
  console.log(props.item.msg.consultRecord?.pictures);
  if (!props.item.msg.consultRecord?.pictures.length)
    return showToast("暂无图片");
  const arr = ref<string[]>([]);
  props.item.msg.consultRecord?.pictures.forEach((item) => {
    arr.value.push(item.url);
  });
  imgs.value = arr.value;
  show.value = true;
}

function buy(prescription: Order) {
  console.log(prescription);
  if (!prescription) return;
  if (prescription.status === PrescriptionStatus.Invalid)
    return showToast("处方已失效");
  if (
    prescription.status === PrescriptionStatus.NotPayment &&
    !prescription.orderId
  ) {
    return router.push("/order/pay?id=" + prescription.id);
  }
  router.push("/orderDetail?orderId=" + prescription.orderId);
}
</script>

<template>
  <div class="room-message-page">
    <!-- 通知-通用 -->
    <div class="msg-normal" v-if="item.msgType === MsgType.Notify">
      <span>{{ item.createTime }}</span>
    </div>
    <!-- 通知-温馨提示 -->
    <div class="msg-tip" v-if="item.msgType === MsgType.NotifyTip">
      <p>
        温馨提示:<span>{{ item.msg.content }}</span>
      </p>
    </div>
    <!-- 通知-结束 -->
    <div class="msg-normal" v-if="item.msgType === MsgType.NotifyCancel">
      <span>{{ item.msg.content }}</span>
    </div>

    <!-- 患者卡片 -->
    <div class="card" v-if="item.msgType === MsgType.CardPat">
      <div class="top">
        <p>
          {{ item.msg.consultRecord?.patientInfo.name }}
          {{ item.msg.consultRecord?.patientInfo.genderValue }}
          {{ item.msg.consultRecord?.patientInfo.age }}岁
        </p>
        <p v-if="item.msg.consultRecord">
          {{ getIllnessTimeText(item.msg.consultRecord?.illnessTime) }} |
          {{ getConsultFlagText(item.msg.consultRecord?.consultFlag) }}
        </p>
      </div>
      <div class="btm">
        <p>
          <span>病情描述</span>
          <span>111111111111</span>
        </p>
        <p>
          <span>图片</span>
          <span @click="imgLook">点击查看</span>
        </p>
      </div>
    </div>
    <!-- 发送消息 -->
    <div
      class="sendMessage"
      v-if="item.msgType === MsgType.MsgText && item.from === store.user?.id"
    >
      <div class="left">
        <p>{{ formatTime(item.createTime) }}</p>
        <div class="info">
          <span>{{ item.msg.content }}</span>
        </div>
      </div>
      <img :src="item.fromAvatar" alt="" />
      <div class="sanjiao"></div>
    </div>
    <!-- 发送图片 -->
    <div
      class="sendMessage"
      v-if="item.msgType === MsgType.MsgImage && item.from === store.user?.id"
    >
      <div class="left">
        <p>{{ formatTime(item.createTime) }}</p>
        <div class="info">
          <img
            style="width: 100px; height: 100px"
            :src="item.msg.picture?.url"
            alt=""
          />
        </div>
      </div>
      <img :src="item.fromAvatar" alt="" />
      <div class="sanjiao"></div>
    </div>
    <!-- 接收消息 -->
    <div
      class="jieshou"
      v-if="item.msgType === MsgType.MsgText && item.from !== store.user?.id"
    >
      <img :src="item.fromAvatar" alt="" />
      <div class="left">
        <p>{{ formatTime(item.createTime) }}</p>
        <div class="info">
          <span>{{ item.msg.content }}</span>
        </div>
      </div>
    </div>
    <!-- 接收图片 -->
    <div
      class="jieshou"
      v-if="item.msgType === MsgType.MsgImage && item.from !== store.user?.id"
    >
      <img :src="item.fromAvatar" alt="" />
      <div class="left">
        <p>{{ formatTime(item.createTime) }}</p>
        <div class="info">
          <img
            style="width: 100px; height: 100px"
            :src="item.msg.picture?.url"
            alt=""
          />
        </div>
      </div>
    </div>
    <!-- 处方卡片 -->
    <div class="msg msg-recipe" v-if="item.msgType === MsgType.CardPre">
      <div class="content" v-if="item.msg.prescription">
        <div class="head van-hairline--bottom">
          <div class="head-tit">
            <h3>电子处方</h3>
            <p>原始处方 <van-icon name="arrow"></van-icon></p>
          </div>
          <p>
            {{ item.msg.prescription.name }}
            {{ item.msg.prescription.genderValue }}
            {{ item.msg.prescription.age }}岁
            {{ item.msg.prescription.diagnosis }}
          </p>
          <p>开方时间：{{ item.msg.prescription.createTime }}</p>
        </div>
        <div class="body">
          <div
            class="body-item"
            v-for="med in item.msg.prescription.medicines"
            :key="med.id"
          >
            <div class="durg">
              <p style="font-size: 18px; color: #000">
                {{ med.name }} {{ med.specs }}
              </p>
              <p>{{ med.usageDosag }}</p>
            </div>
            <div class="num">x{{ med.quantity }}</div>
          </div>
        </div>
        <div class="foot">
          <span @click="buy(item.msg.prescription)">购买药品</span>
        </div>
      </div>
    </div>
    <!-- 评价卡片 -->
    <div
      class="pin"
      v-if="
        item.msgType === MsgType.CardEva || item.msgType === MsgType.CardEvaForm
      "
    >
      <EvaluateCard :evaluateDoc="item.msg.evaluateDoc"></EvaluateCard>
    </div>
  </div>
  <!-- 图片预览 -->
  <van-image-preview
    v-model:show="show"
    :images="imgs"
    :close-on-click-image="false"
  >
    <template #image="{ src }">
      <img :src="src" style="width: 100%; height: 300px" />
    </template>
  </van-image-preview>
</template>

<style lang="scss" scoped>
@import "../../../styles/room.scss";
</style>
